import React, { useEffect } from 'react';
import { connect } from 'umi';
import HeaderTabs from './components/HeaderTabs';
import LongTermElectricityPriceForecast from './components/LongTermElectricityPriceForecast';
import HistorySeqPrice from './components/HistorySeqPrice';
import SequenceProportion from './components/SequenceProportion';
import { TabType } from '@/pages/ETrade/MediumAndLongTermMarket/constant.js';
import { Spin } from 'antd';

import styles from './index.less';

export const MediumAndLongTermMarket = (props) => {
  // 获取省份列表
  useEffect(() => {
    props.fetchNewProvincesEffect({ menuCode: props.menuCode });
  }, []);
  return (
    <Spin spinning={props.loadingNum !== 0}>
      <div className={styles.MediumAndLongTermMarket}>
        <HeaderTabs />
        {(function () {
          switch (props.currentTab) {
            case TabType.HISTORY_SEQ_PRICE.value:
              return <HistorySeqPrice />;
            case TabType.SEQUENCE_PROPORTION_ANALYSIS.value:
              return <SequenceProportion />;
            case TabType.LONGTERM_ELECTRICITYPRICE_FORECAST.value:
              return <LongTermElectricityPriceForecast />;
            case TabType.MARKET_TRACKING.value:
            case TabType.UPSTREAM_POWER_PRICE.value:
              return <></>;
          }
        })()}
      </div>
    </Spin>
  );
};

const mapStateToProps = ({ mediumAndLongTermMarket, global }) => ({
  menuCode: global.configure.menuCode,
  currentTab: mediumAndLongTermMarket.currentTab,
  loadingNum: mediumAndLongTermMarket.loadingNum,
});

const mapDispatchToProps = (dispatch) => {
  return {
    fetchNewProvincesEffect: (payload) =>
      dispatch({ type: 'mediumAndLongTermMarket/fetchNewProvincesEffect', payload }),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(MediumAndLongTermMarket);
